<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Columns</title>
		<link rel="stylesheet" type="text/css" href="../../css/lib/bulma-v0.6.2/css/bulma.css" />
		<link rel="stylesheet" type="text/css" href="../css/bulma-docs.css" />
	</head>

	<body>
		<div class="container">
			<div class="section">
				<div class="columns">
					<div class="column">
						First column
						<p class="bd-notification is-info">First column</p>
					</div>
					<div class="column">
						Second column
						<p class="bd-notification is-success">Second column</p>
					</div>
					<div class="column">
						Third column
						<p class="bd-notification is-warning">Third column</p>
					</div>
					<div class="column">
						Fourth column
						<p class="bd-notification is-danger">Fourth column</p>
					</div>
				</div>
			</div>
			<div class="section">
				<div class="columns">
					<div class="column is-four-fifths">is-four-fifths</div>
					<div class="column">Auto</div>
					<div class="column">Auto</div>
				</div>

				<div class="columns">
					<div class="column is-three-quarters">is-three-quarters</div>
					<div class="column">Auto</div>
					<div class="column">Auto</div>
				</div>

				<div class="columns">
					<div class="column is-two-thirds">is-two-thirds</div>
					<div class="column">Auto</div>
					<div class="column">Auto</div>
				</div>

				<div class="columns">
					<div class="column is-three-fifths">is-three-fifths</div>
					<div class="column">Auto</div>
					<div class="column">Auto</div>
				</div>

				<div class="columns">
					<div class="column is-half">is-half</div>
					<div class="column">Auto</div>
					<div class="column">Auto</div>
				</div>

				<div class="columns">
					<div class="column is-two-fifths">is-two-fifths</div>
					<div class="column">Auto</div>
					<div class="column">Auto</div>
				</div>

				<div class="columns">
					<div class="column is-one-third">is-one-third</div>
					<div class="column">Auto</div>
					<div class="column">Auto</div>
				</div>

				<div class="columns">
					<div class="column is-one-quarter">is-one-quarter</div>
					<div class="column">Auto</div>
				</div>

				<div class="columns">
					<div class="column is-one-fifth">is-one-fifth</div>
					<div class="column">Auto</div>
					<div class="column">Auto</div>
				</div>
			</div>
		</div>
	</body>

</html>